<template>
      <div class="content" v-loading="loading">
          <div class="left-box" >
              <div style="margin:20px 0px">
                 <el-button type="primary" size="small"  @click="newDilog" plain>开启新对话</el-button>
              </div>
              <el-table
              ref="myTable"
              :data="hisData"
              highlight-current-row
              max-height="500px"
              @current-change="handleCurrentChange"
              >
              <el-table-column
                prop="date"
                label="历史列表"
                >
                <template #default="{ row }">
                  <div style="display:flex;align-items:center;justify-content:space-between">
                    <div>
                      {{formatDate(row.createdAt)}}
                    </div>
                    <!-- <div>
                       <el-button type="text" icon="el-icon-delete" circle style="color:#F56C6C" ></el-button>
                    </div> -->
                  </div>
                  
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="right-box" >
            <div>
                    <div class="select-template">
                        <div class="select-header">
                          <div class="select-header-title">输入需求</div>
                          <!-- <div><el-button type="text" @click="dialogTableVisible = true" >选择模型</el-button></div> -->
                          
                        </div>
                         <div style="max-width:800px;">
                            <el-input type="textarea"  rows="10" placeholder="请输入你的需求" v-model="query" :readonly="hisFlag || inputDisable"></el-input>
                          </div>
                      </div>
                      <div style="margin:20px 0px;max-width:800px;">
                            <el-button type="primary" size="small" @click="onSubmit" :disabled="hisFlag" v-if="!hisFlag">审计问题定性</el-button>
                            <el-alert title="审计问题定性任务已完成" type="success" effect="dark" :closable="false" v-if="hisFlag && state=='COMPLETED'"></el-alert>
                            <el-alert title="审计问题定性任务等待处理" type="info" effect="dark" :closable="false" v-if="hisFlag && state=='PENDING'"></el-alert>
                            <el-alert title="审计问题定性任务处理中"  type="warning" effect="dark" :closable="false" v-if="hisFlag && state=='PROCESSING'"></el-alert>
                            <el-alert title="审计问题定性任务已失败" type="error" effect="dark" :closable="false" v-if="hisFlag && state=='FAILED'"></el-alert>
                      </div>
                      <div class="select-header" style="margin-top:20px">
                          <div class="select-header-title">生成结果</div>
                        </div>
                      <div  class="code" style="max-width:800px;">
                        <vue-markdown :source="sqlContent"></vue-markdown>
                      </div>
                      <div>
                        <el-button  size="small" @click="copyClick(sqlContent)"  v-if="hisFlag && sqlContent">复制完整内容</el-button>
                        <el-button  size="small" type="danger"   @click="deleteData()" v-if="state=='PENDING'">取消任务排队</el-button>
                      </div>
                  </div>
          </div>

      </div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
import { formatDateTime } from '@/tools/index'
export default {
  name: 'ProblemAnalysis',  
  data(){
    return{
      delId:'',
      loading:false,
      query:'',
      inputDisable:false,
      hisData:[],
      sqlContent:'',
      hisFlag:false,
      type:'AUDIT_PROBLEM',
      state:'',
      timeoutId:null,
      dialogTableVisible:false
    }
  },
  computed: {
  },
  components: {
    VueMarkdown
  },
  created(){
    this.getHisData(false);
  },
  methods:{
    clickFuc(row){
      console.log(9898,row);
      this.newDilog();
      this.query=row.approachDesc;
      this.dialogTableVisible=false;
      this.inputDisable=true;
    },
    newDilog(){
      clearTimeout(this.timeoutId);
      this.query="";
      this.$refs.myTable.setCurrentRow()
      this.hisFlag=false;
      this.inputDisable=false;
      this.sqlContent='';
      
    },
    formatDate(time){
      console.log(99,time);
      return formatDateTime(time);
    },
    deleteData(){
      this.$confirm('取消任务排队将无法恢复，确认取消？').then(_ => {
          if(this.state!="PENDING"){
            this.$message.warning('当前任务状态已发生变更');
          }else{
            this.$axios.delete('/api/services/hzsfjtai/task/delete?id='+this.delId, {}).then(res => {
            if (res.data.code === 200) {
              this.$message.success('取消成功');
              this.getHisData(false);
            } else {
              this.$message(res.data.message)
            }
          }).catch(err => {
            this.$message.error(err)
          })
          }
      }).catch(_ => {});
    },
    handleCurrentChange(val) {
      if(val){
        clearTimeout(this.timeoutId);
        this.hisFlag=true;
        this.$axios.get('/api/services/hzsfjtai/task/getDesc?id='+val.id, {}).then(res => {
          if (res.data.code === 200) {
            this.delId=res.data.data.id;
            this.sqlContent =res.data.data.taskResponseData;
            this.state=res.data.data.status;
            this.query =JSON.parse(res.data.data.taskData).query;
            let _this=this;
            if(_this.state!="COMPLETED"  &&  _this.state !="TIMEOUT"  &&  _this.state !="FAILED"){
             _this.timeoutId =   setTimeout(() => {
                    _this.handleCurrentChange(val); // 递归调用
                }, 3000);
            }else{
              val.status=_this.state
            }
          } else {
            this.$message(res.data.msg)
          }
        }).catch(err => {
          this.$message.error(err)
        })
      }
      
    },
    //获取历史数据
    getHisData(checkFlag){
      this.$axios.get('/api/services/hzsfjtai/task/getList?taskType='+this.type, {}).then(res => {
        if (res.data.code === 200) {
          this.hisData=res.data.data;
          if(checkFlag){
            this.$nextTick(()=>{
              this.$refs.myTable.setCurrentRow(this.hisData[0])
              this.loading=false
            })
          }
        } else {
          this.$message(res.data.msg)
        }
      }).catch(err => {
        this.$message.error(err)
      })
    },
    onSubmit() {
      if(this.query==''){
        this.$message.warning('请输入问题');
        return
      }
    this.hisFlag=true
    this.loading=true
    this.$axios.post('/api/services/hzsfjtai/llm/auditProblem', {query:this.query}).then(res => {
        if (res.data.code === 200) {
          this.getHisData(true);
        } else {
          this.hisFlag=false
          this.$message(res.data.msg)
        }

      }).catch(err => {
        this.$message.error(err)
      })
    },
    copyClick(text) {
        this.$copyText(text).then(() => {
            this.$message.success('复制成功');
        }).catch(() => {
            this.$message.warning('复制失败');
        });
    },
    exit(){
      this.$router.push({ path: '/dashboard' })
    },
  },
  mounted() {
  },
  beforeDestroy(){
    clearTimeout(this.timeoutId);
  }
}
</script>
<style scoped lang="less" >
/deep/ .el-table .el-table__row:hover {
  cursor: pointer; /* 这里可以更改为其他的光标样式，比如 'crosshair', 'help', 'move', 'not-allowed' 等 */
}
</style>

